<template>
  <div>
    <el-container class="top tac">
      <el-card class="box-card center">
        <!-- 页面输入框 -->

        <div>
          <el-header style=" line-height:60px;font-size:25px;font-weight:900;">后台数据管理登陆系统</el-header>
        </div>
        <div class="mt-40">
          <el-input v-model="name" style="width:250px" placeholder="请输入账号"></el-input>
        </div>

        <div class="mt-40">
          <el-input
            type="password"
            v-model="pass"
            autocomplete="off"
            style="width:250px"
            placeholder="请输入密码"
          ></el-input>
        </div>

        <div class="mt-40">
          <el-button
            type="primary"
            @click="submitForm"
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="margin-right:100px"
          >提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-card>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      name: "",
      pass: ""
    };
  },
  methods: {
    submitForm() {
      this.loading = true;
      if (this.name == false) {
        this.$message({
          showClose: true,
          message: "请输入账号"
        });
        setTimeout(() => {
          this.loading = false;
        }, 800);
      } else if (this.pass == false) {
        this.$message({
          showClose: true,
          message: "请输入密码"
        });
        setTimeout(() => {
          this.loading = false;
        }, 800);
      } else {
        let url = "/user/login";
        let data = {
          username: this.name,
          password: this.pass
        };
        this.$axios
          .post(url, data)
          .then(res => {
            let obj = this.$message({
              showClose: true,
              message: "登陆中",
              type: "success"
            });
            this.$store.commit(`updataname`, res.data.username);
            this.$store.commit(`updataislogin`, true);
            setTimeout(() => {
              this.loading = false;
              obj.close();
              this.$router.push("/show/index");
            }, 800);
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "账号或密码错误",
              type: "warning"
            });
            this.loading = false;
          });
      }
    },
    resetForm() {
      this.loading = false;
      this.name = "";
      this.pass = "";

    }
  }
};
</script>
<style lang="less" scoped>
.top {
  background-image: url("../../assets/img/man.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}
.box-card {
  width: 500px;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  border: none;
}
.center {
  margin: auto;
}
.el-form-item__content {
  margin: 0;
}
</style>

